<template>
	<view :data-theme="theme" class="page-container">
		<view class="video-page">
			<!-- 垂直视频轮播组件 -->
			<verticalVideoSwiper 
				:videoList="videoList" 
				:height="videoHeight"
				:isLogin="isLogin"
				@updateCurrentVideo="updateCurrentVideo"
				@videoEnded="onVideoEnded"
			/>
		</view>
		<!-- 底部导航占位 -->
		<view v-if="bottomNavigationIsCustom" class="footer-placeholder"></view>
		<!-- 底部导航组件 -->
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者,助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	
	import { mapGetters } from "vuex";
	import pageFooter from "@/components/pageFooter/index.vue";
	import verticalVideoSwiper from "./components/verticalVideoSwiper.vue";
	import { discoverListApi, noteLikeApi } from '@/api/discover.js';
	
	let app = getApp();
	
	export default {
		components: {
			pageFooter,
			verticalVideoSwiper
		},
		computed: {
			...mapGetters(['bottomNavigationIsCustom', 'isLogin']),
			// 计算视频容器高度（全屏高度减去底部导航高度）
			videoHeight() {
				if (this.bottomNavigationIsCustom) {
					// 如果有自定义底部导航，减去导航高度
					return 'calc(100vh - 98rpx)';
				}
				return '100vh';
			},
			// 获取当前播放的视频信息用于分享
			currentVideo() {
				return this.videoList[this.currentVideoIndex] || this.videoList[0];
			}
		},
		data() {
			return {
				theme: app.globalData.theme,
				currentVideoIndex: 0, // 当前视频索引
				page: 1, // 当前页码
				limit: 30, // 每页数量
				loading: false, // 加载状态
				hasMore: true, // 是否还有更多数据
				// 视频列表数据
				videoList: [
					// {
					// 	videoUrl: 'https://img.yiqichuang6688.top/crmebimage/public/product/2025/07/22/853ce20ec3cc4adb9ab040e16647b58dk7xp8qhgm8.mp4',
					// 	title: '视频标题 1',
					// 	id: 1,
					// 	likeCount: 1234,
					// 	shareCount: 56,
					// 	isLiked: false
					// },
				]
			}
		},
		onLoad(options) {
			// 获取视频列表数据
			this.getVideoList();
		},
		onShow() {
			
		},
		// #ifdef MP
		/**
		 * 微信小程序分享配置 - 参考news_details页面
		 */
		onShareAppMessage() {
			const video = this.currentVideo;
			return {
				title: video.title || '精彩视频分享',
				imageUrl: video.coverImage || '',
				path: `/pages/video/index?id=${video.id || ''}`
			};
		},
		// #endif
		methods: {
			/**
			 * 获取视频列表
			 */
			async getVideoList() {
				if (this.loading || !this.hasMore) return;
				
				this.loading = true;
				
				try {
					const params = {
						page: this.page,
						limit: this.limit,
            categoryId: 1,  // 分类ID（可选）视频分类这里默认传1当前使用的是社区笔记相关接口
            topicId: '',     // 话题ID（可选）
            type: 2            // 类型：2-视频
					};
					
					const res = await discoverListApi(params);
					
					if (res.code === 200 && res.data && res.data.list) {
						// 转换API数据格式为组件需要的格式
						const newVideos = res.data.list.map(item => ({
							id: item.id,
							videoUrl: item.video,
							coverImage: item.cover,
							title: item.title,
							authorId: item.authorId,
							authorName: item.authorName,
							authorAvatar: item.authorAvatar,
							likeCount: item.likeNum,
							shareCount: item.shareNum,
							commentCount: item.replyNum,
							isLiked: item.isLike,
							isCollect: item.isCollect
						}));
						
						if (this.page === 1) {
							// 第一页,直接替换
							this.videoList = newVideos;
						} else {
							// 后续页,追加数据
							this.videoList = [...this.videoList, ...newVideos];
						}
						
						// 判断是否还有更多数据
						this.hasMore = newVideos.length >= this.limit;
						
						// 页码+1
						if (this.hasMore) {
							this.page++;
						}
						
						console.log('视频列表加载成功:', this.videoList.length, '条数据');
					} else {
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取视频列表失败:', error);
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			/**
			 * 更新当前视频索引（用于分享）
			 */
			updateCurrentVideo(index) {
				this.currentVideoIndex = index;
				console.log(`当前分享视频索引: ${index}`);
			},
			/**
			 * 视频播放完毕事件处理
			 */
			onVideoEnded(data) {
				const { index, video } = data;
				console.log('页面层: 视频播放完毕', {
					index: index,
					videoId: video.id,
					videoTitle: video.title
				});
				
				// TODO: 在这里调用后端接口
				// 示例:
				// 1. 记录用户观看完成
				// this.recordWatchComplete(video.id);
				// 
				// 2. 更新观看进度
				// this.updateWatchProgress(video.id, 100);
				//
				// 3. 获取推荐视频
				// this.fetchRecommendedVideos(video.id);
				//
				// 4. 统计数据上报
				// this.reportVideoStats(video.id, 'complete');
			}
		}
	}
</script>

<style scoped lang="scss">
	// 最外层容器，禁止滚动
	.page-container {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.video-page {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}
	
	// 底部导航占位,防止内容被底部导航遮挡
	.footer-placeholder {
		height: calc(98rpx + constant(safe-area-inset-bottom)); // 兼容 iOS < 11.2
		height: calc(98rpx + env(safe-area-inset-bottom)); // 兼容 iOS >= 11.2
	}
</style>
